<template>
  <div class="clearfix">
         <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="所有英雄" name="all_hero" ></el-tab-pane>
            <el-tab-pane label="刺客" name="first"></el-tab-pane>
            <el-tab-pane label="战士" name="second"></el-tab-pane>
            <el-tab-pane label="法师" name="third"></el-tab-pane>
            <el-tab-pane label="射手" name="fourth"></el-tab-pane>
            <el-tab-pane label="坦克" name="fiveth"></el-tab-pane>
            <el-tab-pane label="辅助" name="sixth"></el-tab-pane>
        </el-tabs>
        <div class="clearfix">
            <el-input placeholder="请输入内容" v-model="search_value" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <!-- 所有英雄 -->
        <div v-if="activeName=='all_hero'" style="height:352px;">
            <el-checkbox-group v-model="all_hero_count">
                <div class="hero" v-for="(item,index) in hero_list" :key="index">
                    <div class="hero_logo">
                        <img :src="item.imageUrl" alt="">
                    </div>
                    <el-checkbox :label="item.id" name="type"  :key="item.id" @change="handleChangeAll">{{item.heroName}}</el-checkbox>
               </div> 
            </el-checkbox-group>
            <div class="pagination">
            <el-pagination :page-size="pageSize" :pager-count="cur_page" layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div> 
        <!-- 刺客 -->
        <div v-if="activeName=='first'" style="height:352px;">
            <!-- <el-checkbox-group v-model="assassin_hero_count"> -->
            <el-checkbox-group v-model="all_hero_count">
                <div class="hero" v-for="(item,index) in hero_list" :key="index">
                    <div class="hero_logo">
                        <img :src="item.imageUrl" alt="">
                    </div>
                    <el-checkbox :label="item.id" name="type" :key="item.id" @change="handleChange_assassin">{{item.heroName}}</el-checkbox>
               </div> 
            </el-checkbox-group>
            <div class="pagination">
            <el-pagination :page-size="pageSize" :pager-count="cur_page" layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div> 
        <!-- 战士 -->
        <div v-if="activeName=='second'" style="height:352px;">
            <!-- <el-checkbox-group v-model="fighter_hero_count"> -->
            <el-checkbox-group v-model="all_hero_count">
                <div class="hero" v-for="(item,index) in hero_list" :key="index">
                    <div class="hero_logo">
                        <img :src="item.imageUrl" alt="">
                    </div>
                    <el-checkbox :label="item.id" name="type" :key="item.id" @change="handleChange_fighter">{{item.heroName}}</el-checkbox>
               </div> 
            </el-checkbox-group>
            <div class="pagination">
            <el-pagination :page-size="pageSize" :pager-count="cur_page" layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div> 
        <!-- 法师 -->
        <div v-if="activeName=='third'" style="height:352px;">
            <!-- <el-checkbox-group v-model="mage_hero_count"> -->
            <el-checkbox-group v-model="all_hero_count">
                <div class="hero" v-for="(item,index) in hero_list" :key="index">
                    <div class="hero_logo">
                        <img :src="item.imageUrl" alt="">
                    </div>
                    <el-checkbox :label="item.id" name="type" :key="item.id" @change="handleChange_mage">{{item.heroName}}</el-checkbox>
               </div> 
            </el-checkbox-group>
            <div class="pagination">
            <el-pagination :page-size="pageSize" :pager-count="cur_page" layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div> 
         <!-- 射手 -->
        <div v-if="activeName=='fourth'" style="height:352px;">
            <!-- <el-checkbox-group v-model="marksman_hero_count"> -->
            <el-checkbox-group v-model="all_hero_count">
                <div class="hero" v-for="(item,index) in hero_list" :key="index">
                    <div class="hero_logo">
                        <img :src="item.imageUrl" alt="">
                    </div>
                    <el-checkbox :label="item.id" name="type" :key="item.id" @change="handleChange_marksman">{{item.heroName}}</el-checkbox>
               </div> 
            </el-checkbox-group>
            <div class="pagination">
            <el-pagination :page-size="pageSize" :pager-count="cur_page" layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div> 
         <!-- 坦克 -->
        <div v-if="activeName=='fiveth'" style="height:352px;">
            <!-- <el-checkbox-group v-model="tank_hero_count"> -->
            <el-checkbox-group v-model="all_hero_count">
                <div class="hero" v-for="(item,index) in hero_list" :key="index">
                    <div class="hero_logo">
                        <img :src="item.imageUrl" alt="">
                    </div>
                    <el-checkbox :label="item.id" name="type" :key="item.id" @change="handleChange_tank">{{item.heroName}}</el-checkbox>
               </div> 
            </el-checkbox-group>
            <div class="pagination">
            <el-pagination :page-size="pageSize" :pager-count="cur_page" layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div> 
         <!-- 辅助 -->
        <div v-if="activeName=='sixth'" style="height:352px;">
            <!-- <el-checkbox-group v-model="support_hero_count"> -->
            <el-checkbox-group v-model="all_hero_count">
                <div class="hero" v-for="(item,index) in hero_list" :key="index">
                    <div class="hero_logo">
                        <img :src="item.imageUrl" alt="">
                    </div>
                    <el-checkbox :label="item.id" name="type" :key="item.id" @change="handleChange_support">{{item.heroName}}</el-checkbox>
               </div> 
            </el-checkbox-group>
            <div class="pagination">
            <el-pagination :page-size="pageSize" :pager-count="cur_page" layout="prev, pager, next" :total="totalCount" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "all_hero",
      all_hero_count: [], //所有英雄选择总数
      assassin_hero_count: [], //刺客英雄选择总数
      fighter_hero_count: [], //战士英雄选择总数
      mage_hero_count: [], //法师英雄选择总数
      marksman_hero_count: [], //射手英雄选择总数
      tank_hero_count: [], //坦克英雄选择总数
      support_hero_count: [], //辅助英雄选择总数
      search_value: "", //搜索值
      hero_option: [
        { option: "所有" },
        { option: "战士" },
        { option: "法师" },
        { option: "射手" },
        { option: "坦克" },
        { option: "刺客" },
        { option: "辅助" }
      ],
      isChoose: "",
      hero_list: [],
      cur_page: 1, //当前页
      pageSize: 45,
      totalCount: 0, //总数
      result: {}
    };
  },
  props: {
    championIds: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    //初始化数据
    async getData(data) {
      this.hero_list = [];
      let res = await this.$post({
        url: this.fn.chatApi + "/admin/hero/getList",
        data: !data
          ? {
              pageNo: this.cur_page || 1,
              pageSize: 45
            }
          : data
      });
      if (res.code == 111111) {
        this.hero_list = res.data.dataList;
        if (this.championIds !== undefined || null) {
          let set = new Set([...this.all_hero_count, ...this.championIds]);
          this.all_hero_count = Array.from(set);
          this.totalCount = res.data.totalCount;
        }
      }
    },
    //选中所有英雄
    handleChangeAll() {
      console.log(this.all_hero_count);
      this.$emit("allHero", this.all_hero_count);
    },
    //选中刺客英雄
    handleChange_assassin() {
      console.log(this.all_hero_count);
      // this.$emit("assassinHero", this.assassin_hero_count);
      this.$emit("assassinHero", this.all_hero_count);
    },
    //选中战士英雄
    handleChange_fighter() {
      console.log(this.all_hero_count);
      // this.$emit("fighterHero", this.fighter_hero_count);
      this.$emit("fighterHero", this.all_hero_count);
    },
    //选中法师英雄
    handleChange_mage() {
      console.log(this.all_hero_count);
      // this.$emit("mageHero", this.mage_hero_count);
      this.$emit("mageHero", this.all_hero_count);
    },
    //选中射手英雄
    handleChange_marksman() {
      console.log(this.all_hero_count);
      // this.$emit("marksmanHero", this.marksman_hero_count);
      this.$emit("marksmanHero", this.all_hero_count);
    },
    //选中坦克英雄
    handleChange_tank() {
      console.log(this.all_hero_count);
      // this.$emit("tankHero", this.tank_hero_count);
      this.$emit("tankHero", this.all_hero_count);
    },
    //选中辅助英雄
    handleChange_support() {
      console.log(this.all_hero_count);
      // this.$emit("supportHero", this.support_hero_count);
      this.$emit("supportHero", this.all_hero_count);
    },

    //切换选择
    handleClick(tab, event) {
      this.cur_page = 1;
      if (tab.name == "all_hero") {
        this.activeName = "all_hero";
        this.result = {
          pageNo: this.cur_page,
          pageSize: 45
        };
      } else if (tab.name == "first") {
        this.activeName = "first";
        this.result = {
          pageNo: this.cur_page,
          pageSize: 45,
          heroTag: "Assassin"
        };
      } else if (tab.name == "second") {
        this.activeName = "second";
        this.result = {
          pageNo: this.cur_page,
          pageSize: 45,
          heroTag: "Fighter"
        };
        console.log(this.result);
      } else if (tab.name == "third") {
        this.activeName = "third";
        this.result = {
          pageNo: this.cur_page,
          pageSize: 45,
          heroTag: "Mage"
        };
      } else if (tab.name == "fourth") {
        this.activeName = "fourth";
        this.result = {
          pageNo: this.cur_page,
          pageSize: 45,
          heroTag: "Marksman"
        };
      } else if (tab.name == "fiveth") {
        this.activeName = "fiveth";
        this.result = {
          pageNo: this.cur_page,
          pageSize: 45,
          heroTag: "Tank"
        };
      } else if (tab.name == "sixth") {
        this.activeName = "sixth";
        this.result = {
          pageNo: this.cur_page,
          pageSize: 45,
          heroTag: "Support"
        };
      }
      this.getData(this.result);
    },
    //选择样式
    selectStyle(item, index) {
      this.$nextTick(function() {
        this.hero_option.forEach(function(item) {
          Vue.set(item, "active", false);
        });
        Vue.set(item, "active", true);
      });
    },
    //分页
    handleCurrentChange(val) {
      this.cur_page = val;
      this.result.pageNo = val;
      if (this.activeName == "all_hero") {
        this.result.pageSize = 45;
      }
      this.getData(this.result);
    }
  }
};
</script>
<style lang='scss'>
.input-with-select {
  width: 180px;
  float: right;
  margin-bottom: 20px;
}
.hero {
  text-align: center;
  display: inline-block;
  width: 100px;
  height: 100px;
}
.hero_logo {
  margin: 0 auto;
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    border-radius: 50%;
  }
}

.selete-checklist {
  float: left;
  width: 100%;
  padding-top: 5px;
}
.selete-item {
  float: left;
  min-width: 40px;
  width: 55px;
  margin-right: 17px;
  position: relative;
}
.selete-item .ms-radio,
.selete-item li,
.selete-item label {
  float: left;
  cursor: pointer;
}
.current .ms-radio .i {
  background: #00a383;
  border-radius: 10px;
}
.ms-radio {
  margin-right: 3px;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #b1b1b1;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.ms-radio .i {
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 10px;
  width: 10px;
  cursor: pointer;
  background: #fff;
}
</style>
